<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extra/spring-security">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <title>Echo - 首页</title>
</head>
<body>
<!-- 头部 -->
<header class="bg-light sticky-top" th:fragment="header" style="box-shadow: 5px 5px 5px #cfcccc;">
    <div class="container">
        <!-- 导航 -->
        <nav class="navbar navbar-expand-lg navbar-dark">
            <!-- logo -->
            <a class="navbar-brand"  th:href="@{/index}"><img src="../img/logo.png" style="width:147px; height: 42px"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 功能 -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item ml-3 btn-group-vertical">
                        <a class="nav-link" th:href="@{/info(id=${loginUser.user.id})}">返回个人主页
                        </a>
                </ul>
            </div>
        </nav>
    </div>
</header>
<div class="nk-container">
<!-- 内容 -->
<div class="main">
    <div class="container">
        <div class="position-relative">
            <!-- 筛选条件 -->
            <ul class="nav nav-tabs mb-3">
                <li class="nav-item">
                    <a th:class="|nav-link ${orderMode==0 ? 'active' : ''}|" th:href="@{/post(orderMode=0)}"  ><i style="color: #6c71c4" class="bi bi-lightning"></i> <span style="color: darkorchid">最新</span></a>
                </li>
                <li class="nav-item">
                    <a th:class="|nav-link ${orderMode==1 ? 'active' : ''}|" th:href="@{/post(orderMode=1)}"><i class="bi bi-hand-thumbs-up"></i> 最热</a>
                </li>
            </ul>
        </div>

        <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="hintModalLabel">提示</h5>
                    </div>
                    <div class="modal-body" id="hintBody"></div>
                </div>
            </div>
        </div>
        <!-- 帖子列表 -->
        <ul class="list-unstyled" th:each="list:${page.records}">
            <li class="media pb-3 pt-3 mb-3 border-bottom" >
                <a th:href="@{/info(id=${list?.discussPost.userId})}" th:if="${list?.discussPost.userId}">
                    <img th:src="${list.user.headerUrl}"  class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
                </a>
                             style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                        <span class="badge badge-secondary bg-primary"-->
                              style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                    </h6>
                    <div class="text-muted font-size-12">
                        <u class="mr-3" ></u> 发布于 &nbsp; <b th:text="${list.post}" style="color: #008BA7"></b>
                        <ul class="d-inline float-right">
                            <li class="d-inline ml-2">赞 <span></span></li>
                            <li class="d-inline ml-2">|</li>
                            <li class="d-inline ml-2">回帖 <span></span></li>
                        </ul>
                    </div>
            </li>
        </ul>
        <!--分页 -->
        <nav class="mt-5" th:if = "${page.total>0}" th:fragment="pagination">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:class="|page-item ${page.current==1? 'disabled':''}|">
                    <a class="page-link" th:href="@{${page.path}(current=1)}" >首页</a>
                </li>
                <li th:class="|page-item ${page.current==1?'disabled':''}|">
                    <a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a>  <!-- ${page.path} -->
                </li>
                <!--numbers.sequence 生成一个 page.from 到 page.to 的连续整数数组-->
                <!-- page.from,page.to -->     <li th:each="i:${#numbers.sequence(page.from,page.to)}" th:class="|page-item ${i==page.current? 'active' : ''}|" >
                <a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}"></a>
            </li>
                <li th:class="|page-item ${page.current==page.pages ? 'disabled':''}|">
                    <a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
                </li>
                <li class="page-item" th:class="|page-item ${page.current==page.pages ? 'disabled':''}|">
                    <a class="page-link"  th:href="@{${page.path}(current=${page.pages})}">末页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- 尾部 -->
<footer class="bg-dark" th:fragment="footer" style="background-color: rgb(149,117,244) !important;">
</footer>
</div>
<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/httpUtils.js}"></script>
<script th:src="@{/js/index.js}"></script>
</body>
</html>